<template>
	<view class="w100">
		<view class="cu-bar bg-white">
			<view class="action">
				{{label}}
				<text class="c12 fs8 padl3">{{placeholder}}</text>
			</view>
			<view class="action">
				<view class="cu-btn line-green round" @click="selectPic()">选择图片</view>
			</view>
		</view>
		<view class="cu-form-group padb5">
			<view class="solids fs30 c12" @tap="selectPic()" v-if="picList.length===0">
				<view class=" wh30-30 flcc"><text class='cuIcon-cameraadd'></text></view>
			</view>
			<scroll-view scroll-x="true" class="scroll-view_H">
				<view class="pos-r bdso inlineBlock mar3 " v-for="tile, index in picList" :key="index">
					<image mode="aspectFill" class="picCommonSize bc13" :src="pic(tile)"></image>
					<view class="pos-a w100 r0 l0 b0 flrc op8">
						<view class="cu-btn cuIcon bg-black" @click="move(index,-1)">
							<view class="fa fa-angle-left"></view>
						</view>
						<view class="cu-btn cuIcon bg-black" @click="move(index,1)">
							<view class="fa fa-angle-right"></view>
						</view>
						<view class="cu-btn cuIcon bg-black" @click="del(index)">
							<view class="fa fa-trash"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import picUpLoad from "../../assets/js/picUpload.js"
	let picUp = new picUpLoad()

	export default {
		name: "spics",
		props: {
			value: "",
			label: {
				type: String,
				default: ""
			},
			placeholder: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				picList: []
			}
		},
		methods: {
			selectPic() {
				var _this = this;
				picUp.setData(this.value)
				picUp.select(9).setCbFunc(function(pics) {
					_this.picList = pics
					_this.$emit("input", pics)
				})
			},
			del(index) {
				var _this = this;
				var pics = picUp.removePic(index)
				this.picList = pics
				_this.$emit("input", pics)
			},
			move(index, num) {
				var _this = this;
				var pics = picUp.picMove(index, num)
				this.picList = pics
				_this.$emit("input", pics)
			},
		},
		created() {
				this.log(this.value)
				this.picList = this.value
			picUp.setData(this.value)
		},
		watch:{
			value(curVal,oldVal){
				this.log(curVal)
				picUp.setData(curVal)
				var _this = this;
				_this.picList = curVal
				_this.$emit('input',curVal)
			},
		}
	}
</script>

<style>
	.picCommonSize {
		width: 40vw;
		height: 40vw;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>
